<template>
    <div class="photo-list page-common">
      <!--1.0图片分类-->
      <div class="photo-cate">
        <ul v-bind="{style:'width:'+ulWidth+'px'}">
          <li>全部</li>
          <li v-for="item in photocates" :key="item.id">{{item.title}}</li>
        </ul>
      </div>

      <!--2.0 图片列表-->
      <div id="imglist">
        <ul>
          <li v-for="item in photolist" :key="item.id">
            <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
              <img v-lazy="item.img_url">
              <div id="desc">
                <h5 v-text="item.title"></h5>
                <p v-text="item.zhai_yao"></p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
  import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
              ulWidth:'375',
              photocates:[], //图片分类数据
              photolist:[]
            }
        },
        components: {},
      methods:{
            getimgCates(){
                let that = this;
              that.axios.get("../static/getimgcate.json",{}).then(function(res){
//                    var that = this;
                    console.log(that);
                  that.photocates = res.data.message;
                  let count = res.data.message.length + 1;
                  that.ulWidth = 90 * count;
                }
            );
//              4.0 实现当前分类数据所在的ul的总宽度 = 分类个数 * 每个分类数据的宽度
        },
        getimges(){
          let that = this;
          that.axios.get("../static/getphotolist.json",{}).then(function(res){
//                    var that = this;
              let body = res.data;
              if(body.status != 0){
                Toast(res.body.message);
                return;
              }
              that.photolist = body.message;
            }
          );
//              4.0 实现当前分类数据所在的ul的总宽度 = 分类个数 * 每个分类数据的宽度
        }
      },
      created(){
        this.getimgCates();
        this.getimges();
      }
    }
    /*知识点图片懒加载，图片分类*/



</script>
<style scoped>
  .photo-cate{
    width: 100%;
    max-width: 375px;
    overflow-x: auto;
  }
  .photo-cate ul{
    padding-left: 10px;
  }
  .photo-cate li{
    display: inline-block;
    list-style: none;
    color:#0094ff;
    font-size: 14px;
    cursor: pointer;
    padding:6px 0px 10px 6px;
  }

  /*实现图片列表样式*/
  #imglist{
    padding: 0 10px;
  width: 100%;
    box-sizing: border-box;
  }
  #imglist ul {
    padding-left: 0px;
  }
  #imglist li{
    list-style:none;
    position: relative ;
  }
  #imglist img{
    width:100%;
    height: 300px;
  }
  #desc{
    width: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 4px;
    left: 0px;
  }
  #desc h5{
    color: #ffffff;
    font-weight: bold;
  }
  #desc p{
    color:#fff;
  }

  image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
</style>
